<template>
    <div class="box">
        <div class="shopbag">
            <van-nav-bar class="shop-bag-nav" title="购物袋" left-text="返回" left-arrow @click-left="back"
                :right-text="mangerState ?'完成':'管理'" @click-right="toggelState" />
            <div v-if="!isbagData" class="shop-empty">
                <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                    :description="islogin ? '购物袋空空的':'登录查看您的购物袋'" />
                <van-button v-if="islogin" round type="info" class="empty-btn-go" color="#0c34ba"
                    @click="golink('Home')">现在去逛逛...</van-button>
                <van-button v-if="!islogin" round type="info" class="empty-btn-go" color="#0c34ba"
                    @click="golink('Login')">点击登录</van-button>
            </div>
            <div v-else>
                <van-swipe-cell class="shopbag-swipe-cell" v-for="(item,index) in shopbagData" :key="index"
                    :disabled="mangerState">
                    <div class="shopbag-item-content">
                        <van-checkbox v-model="item.isChange" @click="chooseThis(item.isChange)"></van-checkbox>
                        <img :src="item.small_img" alt="">
                        <div class="item-info">
                            <div class="title">{{item.name}} <span class="taste">{{item.rule}}</span></div>
                            <div class="en-title">{{item.enname}}</div>
                            <div class="item-price">
                                <span>￥{{item.price}}</span>
                                <van-stepper v-model="item.count" theme="round" button-size="22" disable-input
                                    @change="changeCount(item.sid,item.count)" />
                            </div>
                        </div>
                    </div>
                    <template #right>
                        <van-button class="shopbag-btn-del" type="info" text="删除" @click="removeData(item.sid)" />
                    </template>
                </van-swipe-cell>
            </div>

            <van-submit-bar v-if="isbagData&& !mangerState" :price="priceMore" button-text="提交订单" @submit="submit"
                button-color="#0c34ba">
                <van-checkbox v-model="checkedAll" @click="chooseAll()">全选</van-checkbox>
            </van-submit-bar>
            <van-submit-bar v-if="isbagData&&mangerState" button-text="删除" class="bar-del-bag" @submit="removeDataMore">
                <van-checkbox v-model="checkedAll" @click="chooseAll">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
    import '../assets/scss/Shopbag.scss'

    export default {
        name: 'Shopbag',
        data() {
            return {
                // 测试图片
                islogin: false,
                isbagData: false,
                img: 'http://www.kangliuyong.com:10002/images/product_large/IMG_0390_02.jpg',
                price: 2800,

                mangerState: false,

                checked: true,
                checkedAll: false,

                goodCount: 0,
                shopbagData: [],

                // 选中数据
                chooseData: []


            }
        },
        created() {
            this.isLogin();
            this.getShopbagData();
        },
        methods: {
            isLogin() {
                // 判断是否登录
                if (localStorage.getItem('__tk'))
                    this.islogin = true;
            },
            golink(name) {
                this.$router.push({
                    name
                });

            },
            // 管理状态切换
            toggelState() {
                this.mangerState = !this.mangerState;
            },
            back() {
                this.$router.back();
            },
            // 单选
            chooseThis(flg) {
                if (!flg) {
                    this.checkedAll = false;
                }
                this.getChooseData();
            },
            // 全选
            chooseAll() {
                if (this.checkedAll) {
                    this.shopbagData.map(i => {
                        i.isChange = true;
                    })
                } else {
                    this.shopbagData.map(i => {
                        i.isChange = false;
                    })
                }
                this.getChooseData();
            },
            // 获取购物篮数据
            getShopbagData() {
                // 购物车总数
                this.axios({
                        //请求类型
                        method: "GET",
                        //请求路径
                        url: '/findAllShopcart',

                        //GET请求参数, object
                        params: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk')
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();
                        console.log("ShopbagCount result ==> ", result);

                        // 成功
                        if (result.data.code === 5000) {
                            result.data.result.map(item => {
                                item.isChange = false;
                            });
                            // 注意  赋值更改无法绑定在页面上
                            // 原因：在Vue实例创建时， 后添加的新属性并未声明，因此就没有被Vue转换为响应式的属性
                            // 如果要后更改  需要使用$set方法，把后来添加的属性处理成响应属性
                            this.shopbagData = result.data.result;
                            this.isbagData = result.data.result.length;
                        }

                    })
                    .catch((err) => {
                        this.$toast.clear();
                        console.log("err ==> ", err);
                    });
            },
            // 获取选中数据
            getChooseData() {
                let tempdata = [];
                this.shopbagData.map(i => {
                    if (i.isChange) {
                        tempdata.push(i);
                    }
                })
                this.chooseData = tempdata;
                // console.log('chooseData==>', this.chooseData);
            },
            // 修改商品数值
            changeCount(sid, count) {
                this.axios({
                        //请求类型
                        method: "POST",
                        //请求路径
                        url: '/modifyShopcartCount',
                        //GET请求参数, object
                        data: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk'),
                            sid,
                            count
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();
                        // console.log("changeCount result ==> ", result);
                        if (result.data.code === 6000) {
                            console.log(result.data.msg);
                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();
                        console.log("err ==> ", err);
                    });

            },
            // 删除单个
            removeData(sid) {
                let sids = [];
                sids.push(sid);
                this.axios({
                        //请求类型
                        method: "POST",
                        //请求路径
                        url: '/removeShopcart',
                        //GET请求参数, object
                        data: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk'),
                            sids: JSON.stringify(sids)
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();
                        console.log("ShopbagCount result ==> ", result);
                        if (result.data.code === 7000) {
                            this.$toast.success(result.data.msg);
                            // 重新获取商品
                            this.getShopbagData();
                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();
                        console.log("err ==> ", err);
                    });
            },
            // 多个删除
            removeDataMore() {
                // 更新选择数据
                this.getChooseData()
                let sids = [];
                this.chooseData.map(i => {
                    sids.push(i.sid);
                })
                console.log(sids);
                this.axios({
                        //请求类型
                        method: "POST",
                        //请求路径
                        url: '/removeShopcart',
                        //GET请求参数, object
                        data: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk'),
                            sids: JSON.stringify(sids)
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();
                        console.log("ShopbagCount result ==> ", result);
                        if (result.data.code === 7000) {
                            this.$toast.success(result.data.msg);
                            // 重新获取商品
                            this.getShopbagData();
                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();
                        console.log("err ==> ", err);
                    });
            },
            // 提交订单
            submit() {
                console.log('1111');
                let sids = []
                this.chooseData.map(i => {
                    sids.push(i.sid);
                })
                this.$router.push({
                    name: 'Submit',
                    params: {
                        sids
                    }
                });
            }
        },
        computed: {
            priceMore() {
                let prices = 0;
                this.chooseData.map(i => {

                    prices += Number(parseFloat(i.price).toFixed(2)) * i.count;
                })
                // console.log(prices);
                return prices * 100;
            }
        },
    }
</script>